<template>
	<view>
		<view class="my_title-box">
			<view class="my_title_image">
				<image class="image_name"
					src="https://img1.baidu.com/it/u=3139083397,2010985426&fm=224&fmt=auto&gp=0.jpg"></image>
				<text @click="clickhander">登录/注册</text>
				<view class="my_title_icon">
					<u-icon name="kefu-ermai"></u-icon>
					<u-icon name="bell"></u-icon>
				</view>
			</view>
		</view>
		<view class="my-body-box">
			<view class="my-body-text">
				<view class="pannel-item">
					<text>￥0</text>
					<text>余额</text>
				</view>
				<view class="pannel-item">
					<text>0</text>
					<text>优惠券</text>
				</view>
				<view class="pannel-item">
					<text>0</text>
					<text>鲜币兑换</text>
				</view>
				<view class="pannel-item">
					<text>0</text>
					<text>积分兑换</text>
				</view>
			</view>
		</view>
		<view class="my-menu-box">
			<view class="my-menu-list">
				<view class="text-1">
					我的订单
				</view>
				<view class="text-tittle">
					<text style="font-size: 12px; padding-left: 150px;">全部订单</text>
					<u-icon name="arrow-right" size="26" ></u-icon>
				</view>
				
			</view>
			<view class="my-menu-body">
				<view class="menu-lists">
					<view class="nemu-cart">
						<u-icon name="clock" size="60" color="#E1027B"></text></u-icon>
						<text>待支付</text>
					</view>
					<view class="nemu-cart">
						<u-icon name="hourglass-half-fill" size="60" color="#E1027B"></text></u-icon>
						<text>待配送</text>
					</view>
					<view class="nemu-cart">
						<u-icon name="car" size="60" color="#E1027B"></text></u-icon>
						<text>配送中</text>
					</view>
					<view class="nemu-cart">
						<u-icon name="chat" size="60" color="#E1027B"></text></u-icon>
						<text>待评价</text>
					</view>
					<view class="nemu-cart">
						<u-icon name="rmb-circle-fill" size="60" color="#E1027B"></text></u-icon>
						<text>售后/退款</text>
					</view>
				</view>
			</view>
		</view>
		<view class="my-server-box">
			<view class="my-server-title">
				<text>我的服务</text>
			</view>
			<view class="server-contain">
				<view class="server-image">
					<u-icon name="map" size="60" color="#A8D8FC"></u-icon>
					<text>收获地址</text>
				</view>
				<view class="server-image">
					<u-icon name="server-man" size="60" color="#A8D8FC"></u-icon>
					<text>客服和帮助</text>
				</view>
				<view class="server-image">
					<u-icon name="setting" size="60" color="#7DC8E8"></u-icon>
					<text>设置</text>
				</view>
				<view class="server-image">
					<u-icon name="man-add" size="60" color="#E7B446"></u-icon>
					<text>兑换会员</text>
				</view>
				<view class="server-image">
					<u-icon name="gift" size="60" color="#FA1E19"></u-icon>
					<text>积分商城</text>
				</view>
				<view class="server-image">
					<u-icon name="account" size="60" color="#A8D8df"></u-icon>
					<text>个人编辑</text>
				</view>
				<view class="server-image">
					<u-icon name="download" size="60" color="#A8D8df"></u-icon>
					<text>下载中心</text>
				</view>
				<view class="server-image">
					<u-icon name="zhuanfa" size="60" color="#A8D8df"></u-icon>
					<text>退出登录</text>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			clickhander(){
				uni.navigateTo({
					url:'../register/register'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.my_title-box {
		display: flex;
		height: 200rpx;
		align-items: center;
		padding-left: 20rpx;
		border-radius: 20rpx;
		background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fbackgd%2Fcover%2F00%2F57%2F25%2F5c2478b8d2f8d.jpg%21%2Ffw%2F780%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628565780&t=a2cbeff58685cc19a73e772b5b973083);

		.my_title_image {
			height: 200rpx;
			width: 1000rpx;
			display: flex;
			align-items: center;

			text {
				padding: 20rpx;
			}

			.my_title_icon {
				margin-left: 200rpx;
				padding: 0 10rpx;
				font-size: 48rpx;
			}

			.image_name {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				overflow: hidden;
			}
		}
	}

	.my-body-box {
		display: flex;
		margin: 20rpx;
		height: 120rpx;
		background: #F1F1F1;

		.my-body-text {
			height: 100rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			background: #F3F4F6;
			padding: 0 20rpx;

			.pannel-item {
				font-size: 24rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				margin: 20rpx 30rpx;
				padding: 20rpx 0;
			}
		}
	}

	.my-menu-box {
		background: #F3F4F6;
		margin: 20rpx;
		height: 260rpx;
		position: relative;
		.my-menu-list {
			display: flex;
			justify-content: space-between;
			.text-tittle{
			font-size: 28rpx;
			padding: 20rpx;	
			}
			.text-1{
				font-size: 28rpx;
				padding: 20rpx;
				text-align: center;
			}
		
			border-bottom: 2rpx solid #DCDFE6;
			font-weight: 500;
		
		}

		.my-menu-body {
			// display: flex;
			
			.menu-lists {
				display: flex;
				justify-content: space-between;
			
				.nemu-cart {
					display: flex;
					flex-wrap: wrap;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;
					margin: 0 20rpx;
					padding: 20rpx 0;
					font-size: 24rpx;
					font-weight: 500;
					text{
						margin-top: 10rpx;
					}
				}
			}
		}
	}
	.my-server-box{
		background: #F3F4F6;
		margin: 20rpx;
		height: 400rpx;
		position: relative;
		.my-server-title{
			font-size: 28rpx;
			padding: 20rpx;
			font-weight: 500;
		}
		.server-contain{
			display: flex;
			// height: 240rpx;
			// justify-content: space-around;
			flex-wrap: wrap;
			.server-image{
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 24rpx;
				font-weight: 500;
				margin:  20rpx 40rpx;
				// padding: 10rpx;
			}
		}
	}
</style>
